<template>
	<div class="main">
		<MyHeaderVue title="tabBar案例"></MyHeaderVue>
		<keep-alive>
		<component :is='comName'></component>
		</keep-alive>
		<MyTabBarVue :arr="tabList" @changeCom="changeComFn"></MyTabBarVue>
	</div>
</template>

<script>
import 'bootstrap/dist/css/bootstrap.css'
import '@/assets/fonts/iconfont.css'
import MyHeaderVue from './components/MyHeader.vue';
import MyTabBarVue from './components/MyTabBar.vue';

import MyGoodsList from './views/MyGoodsList.vue';
import MyGoodsSearch from './views/MyGoodsSearch.vue';
import MyUserInfo from './views/MyUserInfo.vue';
	export default {
		components:{
			MyHeaderVue,
			MyTabBarVue,
			MyGoodsList,
			MyGoodsSearch,
			MyUserInfo

		},
		methods: {
        changeComFn(comName) {
            // console.log('父组件接受到的数据comName ', comName)
            this.comName = comName
        },
    },
		data() {
			return {
				comName:'MyGoodsList',
				tabList: [ // 底部导航的数据
					{
						iconText: "icon-shangpinliebiao",
						text: "商品列表",
						componentName: "MyGoodsList",
					},
					{
						iconText: "icon-sousuo",
						text: "商品搜索",
						componentName: "MyGoodsSearch",
					},
					{
						iconText: "icon-user",
						text: "我的信息",
						componentName: "MyUserInfo",
					},
				],
			};
		},
	};
</script>

<style scoped>
	.main {
		padding-top: 45px;
		padding-bottom: 51px;
	}
</style>
